//tabel对话框组件
Vue.component("gg-table", {
    props: {
        columns: {
            type: Array,
            required: true,

        },
    },
    template: `
    <table border="1" cellpadding="10" cellspacing="0">

        <thead>

            <tr>
                <th v-for=:"thItem in columns">{{thItem.title}}</th>
                
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>aa</td>
                    <td>bb</td>
                    <td>cc</td>
                </tr>
                <tr>
                    <td>aa</td>
                    <td>bb</td>
                    <td>cc</td>
                </tr>
            </tbody>
        
    </table>`
});










// page组件
Vue.component('ggPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        total: {
            handler(newdata) {
                this.totalPage = Math.ceil(this.total / this.pageSize)
            },
            immediate: true,
        }
    },
    template: `<div class="gg-page">
        <span v-for="num in totalPage" @click="$emit('click-page', num)">{{num}}</span>
    </div>`
})















//dialog组件
Vue.component('gg-dialog', {
    props: {
        title: {
            type: String,
            default: '默认标题'
        },
        content: String,
        visible: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class="gg-dialog" v-if="visible">
        <div class="box">
            <div class="header">{{title}}</div>
            <div class="main">
                {{content}}
            </div>
            <div class="footer">
                <button @click="$emit('update:visible', false)">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>`
})








//loading2组件
Vue.component('gg-loading2', {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class = "gg-loading2" v-if="state" @click="$emit('update:state',fales )">
    <span>loading...</span> 
    </div>`
})








//loading组件
Vue.component('gg-loading', {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class="gg-loading" v-if="state">
        <span></span>
        <span></span>
        <span></span> 
        <span></span>
        <span></span>
    </div>`,
})





// 按钮组件
Vue.component('gg-button', {
    props: {
        content: {
            type: String,
            required: true,
        },
        type: String,
        default: "primary"

    },
    template: `<button :class="['gg-button', 'gg-button--'+type, 'gg-button--normal']  ">
        <div class="gg-button__content">
        <span class="gg-button__text">{{content}}</span>
        </div>
    </button>`

})










//导航栏
Vue.component('daohanglan', {
    props: {
        title: {
            type: String,
            required: true,
        },
        leftArrow: Boolean,
    },
    template: `<div class="daohanglan">
            <span @click="$emit('click-left')">
            {{leftArrow?'<返回':' '}}
            </span>    
            <span>{{title}}</span>    
            <span @click="$emit('click-right')">搜索</span>    
        </div>`
})

















//表单组件
Vue.component('biaodan', {
    props: {
        state: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            yonghushuju: {
                account: '',
                password: ''
            }
        }
    },
    template: `<fieldset>
            <legend>表单组件</legend>
            用户名:<input type="text" v-model="yonghushuju.account"/>
            密码:<input type="password" v-model="yonghushuju.password"/>
            <button v-if="state" @click="$emit('biaodantijiao',yonghushuju)">提交</button>
        </fieldset>`
})